<script setup lang="ts">
import { computed, reactive, watch } from 'vue';
import { addScreen, updateScreen } from '@/service/api';
import { $t } from '@/locales';

defineOptions({
  name: 'ScreenOperateDrawer'
});

interface Props {
  visible: boolean;
  operateType: 'add' | 'edit';
  rowData?: Api.Dataplatform.Screen | null;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  operateType: 'add',
  rowData: null
});

interface Emits {
  (e: 'update:visible', visible: boolean): void;
  (e: 'success'): void;
}

const emit = defineEmits<Emits>();

const title = computed(() => (props.operateType === 'add' ? '新增大屏' : '编辑大屏'));

const model = reactive<Api.Dataplatform.ScreenEdit>({
  name: '',
  description: '',
  screenType: 'CUSTOM',
  width: 1920,
  height: 1080,
  refreshInterval: 0,
  status: 'DRAFT'
});

const rules = {
  name: [{ required: true, message: '请输入大屏名称', trigger: 'blur' }],
  width: [{ required: true, type: 'number', message: '请输入大屏宽度', trigger: 'blur' }],
  height: [{ required: true, type: 'number', message: '请输入大屏高度', trigger: 'blur' }]
};

const screenTypeOptions = [
  { label: '自定义', value: 'CUSTOM' },
  { label: '模板', value: 'TEMPLATE' }
];

const statusOptions = [
  { label: '草稿', value: 'DRAFT' },
  { label: '已发布', value: 'PUBLISHED' },
  { label: '已下线', value: 'OFFLINE' }
];

function handleUpdateVisible(visible: boolean) {
  emit('update:visible', visible);
}

function handleInitModel() {
  Object.assign(model, {
    name: '',
    description: '',
    screenType: 'CUSTOM',
    width: 1920,
    height: 1080,
    refreshInterval: 0,
    status: 'DRAFT'
  });

  if (props.operateType === 'edit' && props.rowData) {
    Object.assign(model, props.rowData);
  }
}

async function handleSubmit() {
  try {
    if (props.operateType === 'add') {
      await addScreen(model);
      window.$message?.success('新增成功');
    } else {
      await updateScreen(model);
      window.$message?.success('更新成功');
    }
    handleUpdateVisible(false);
    emit('success');
  } catch (error) {
    console.error('操作失败:', error);
  }
}

watch(
  () => props.visible,
  newValue => {
    if (newValue) {
      handleInitModel();
    }
  }
);
</script>

<template>
  <NDrawer :show="visible" :width="640" @update:show="handleUpdateVisible">
    <NDrawerContent :title="title" :native-scrollbar="false" closable>
      <NForm :model="model" :rules="rules" label-placement="left" :label-width="100">
        <NFormItem label="大屏名称" path="name">
          <NInput v-model:value="model.name" placeholder="请输入大屏名称" />
        </NFormItem>

        <NFormItem label="大屏类型" path="screenType">
          <NSelect v-model:value="model.screenType" :options="screenTypeOptions" placeholder="请选择大屏类型" />
        </NFormItem>

        <NFormItem label="大屏宽度" path="width">
          <NInputNumber v-model:value="model.width" placeholder="请输入大屏宽度(px)" :min="800" :step="100" class="w-full" />
        </NFormItem>

        <NFormItem label="大屏高度" path="height">
          <NInputNumber v-model:value="model.height" placeholder="请输入大屏高度(px)" :min="600" :step="100" class="w-full" />
        </NFormItem>

        <NFormItem label="刷新间隔" path="refreshInterval">
          <NInputNumber
            v-model:value="model.refreshInterval"
            placeholder="刷新间隔(秒), 0表示不刷新"
            :min="0"
            :step="5"
            class="w-full"
          />
        </NFormItem>

        <NFormItem label="状态" path="status">
          <NSelect v-model:value="model.status" :options="statusOptions" placeholder="请选择状态" />
        </NFormItem>

        <NFormItem label="描述" path="description">
          <NInput
            v-model:value="model.description"
            type="textarea"
            placeholder="请输入大屏描述"
            :autosize="{ minRows: 3, maxRows: 6 }"
          />
        </NFormItem>

        <NFormItem label="备注" path="remark">
          <NInput
            v-model:value="model.remark"
            type="textarea"
            placeholder="请输入备注"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </NFormItem>
      </NForm>

      <template #footer>
        <NSpace justify="end">
          <NButton @click="handleUpdateVisible(false)">取消</NButton>
          <NButton type="primary" @click="handleSubmit">确定</NButton>
        </NSpace>
      </template>
    </NDrawerContent>
  </NDrawer>
</template>

<style scoped></style>
